<template>
	<view class="container">
		<view class="back" @click="Back"><image src="/static/sort1.png" /></view>
		<view class="userinfo">
			<view class="headimg"><image :src="Info.HeadImg" mode="aspectFill" @click="PrevImg(Info.HeadImg)"/></view>
			<view class="btns" v-if="ShowBtn">
				<button open-type="share" class="share" @click="ToShare()">
				<view class="btn"><view class="icon"><image src="/static/fenxiang.png" /></view><view class="name">分享</view></view>
				</button>
				<view class="btn" style="margin-right: 15rpx;" @click="Copy(Info.Link)"><view class="icon"><image src="/static/zhuye.png" /></view><view class="name">抖音主页</view></view>
			</view>
			<view class="nickname">{{Info.NickName}}</view>
			<view class="line"><view class="city">{{Info.City}}</view></view>
			<view class="line top10"><view class="brief">粉丝：{{Info.FunsCount}}&emsp;&emsp;获赞：{{Info.PraiseCount}}</view></view>
			<view class="line top30"><view class="brief">达人介绍：{{Info.Brief}}</view></view>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Info.NickName,
		      path: "pages/darenku/darenkuinfo?scene="+UserID+"&ID="+this.ID //这是一个路径
		    }
		},
		data() {
			return {
				scene:0,
				ID:0,
				Info:{ID:0},
				ShowBtn:false
			};
		},
		onLoad(options) {
			this.ID=options.ID;
			this.scene=options.scene;
			this.Util.SetParam(options);
			this.Find_BloggerInfo();
		},
		methods:{
			Back(){
				if(this.scene){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
			},
			ToShare(){
				this.Util.Loading("请稍候...");
				setTimeout(()=>{
					this.Util.HideLoading();
				},1000);
				
			},
			PrevImg(Img){
				if(Img.indexOf("http")==-1){
					Img="https:"+Img;
				}
				uni.previewImage({
				  current: Img, // 当前显示图片的http链接
				  urls: [Img] // 需要预览的图片http链接列表
				});
			},
			Copy(Text){
				uni.setClipboardData({
				    data: Text,
				    success: json=>{
				        this.Util.Toast("已复制到剪贴板");
				    }
				});
			},
			Find_BloggerInfo(){
				var data = {};
				data.ID=this.ID;
				data.Act="Find_BloggerInfo";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.ShowBtn=json.Data.ShowBtn;
					this.Info = json.Data.Info;
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{width:100%; height:auto; padding-left:20rpx; padding-top:40rpx; background-image: url(http://motiandarenku.qiyedaishu.com/img/bg8.png); background-repeat: no-repeat; background-size: 100%;
		.back{width:60rpx; height:60rpx; border-radius: 40rpx; background-color: #ffffff; opacity: 0.5; position:absolute; top:100rpx; left:20rpx;
			image{width:34rpx; height: 34rpx; margin-top:14rpx; margin-left: 12rpx; transform: rotate(90deg);}
		}
		.back:active{opacity: 0.6;}
		.userinfo{width:710rpx; height:600rpx; margin-top:200rpx; padding-left:30rpx; background-color: #ffffff; border-radius: 20rpx; position: relative;
			.headimg{width:140rpx; height:140rpx; border-radius: 70rpx; box-shadow:0px 0px 4px #2e2e2e; position: absolute; top:-50rpx; left:30rpx; border: 5rpx solid #ffffff; overflow: hidden; image{width:140rpx; height:140rpx;}}
			.btns{width:auto; height:80rpx; padding-top:30rpx; float:right; display:flex; flex-direction: row; padding-right:10rpx;
				.share{background-color: transparent; width:auto; height:60rpx; margin: 0rpx; padding:0rpx; margin-right: 15rpx;}
				.share::after{border:0rpx;}
				.btn{width:auto; height:60rpx; line-height: 60rpx; padding-left:20rpx; padding-right: 20rpx; font-size:28rpx; text-align: center; color:#ff5732; border:1rpx solid #ff5732; border-radius: 30rpx; display:flex; flex-direction: row;
					.icon{width:34rpx; height:34rpx; padding-top:8rpx; image{width:34rpx; height: 34rpx;}}
					.name{width:auto; height:60rpx; padding-left:6rpx; }
				}
				.btn:active{background-color: #ff5732; color:#ffffff; border-radius: 30rpx;}
				.share:active{background-color: #ff5732; color:#ffffff; border-radius: 30rpx;}
				.share:active .name{color:#ffffff;}
			}
			.nickname{width:100%; height:70rpx; line-height: 70rpx; margin-top:20rpx; font-size:36rpx; float:left; font-weight: bold;}
			.line{width:100%; height:auto; float:left;		
				.city{width:auto; height:40rpx; line-height: 40rpx; padding-left:8rpx; padding-right: 8rpx; font-size:28rpx; float:left; color:#888888; background-color: #f5f5f5; border-radius: 8rpx;}
				.brief{color:#666666; font-size:32rpx; line-height: 45rpx;}
			}
		}
	}
</style>
